<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>${system_login_title}</title>
    <link rel="shortcut icon" href="$!basePath/framework/img/logo.png">
    <link rel="stylesheet" type="text/css" href="$!basePath/app/login/default/styles.css">
    <script>
        if (top.window != window) {
            top.window.location.href = window.location.href;
        }
    </script>
</head>
<body>
<div class="wrapper">
    <div class="container">
        <h1>${system_login_title}</h1>
        <form class="form" id="loginForm" action="$!basePath/login/do" method="post">
            <input type="hidden" id="verifycode" name="verifycode">
            <input name="username" type="text" placeholder="用户名">
            <input name="password" type="password" placeholder="密码">
            <button type="submit" id="login-button">#i18n("system.login")</button>
        </form>
        <form class="form" id="verifyForm" style="display:none;" action="$!basePath/login/do" method="post" onsubmit="return verifySubmit()">
            <div>
                <a href="javascript:;" onclick="loadImage()"><img style="height:46px;"/></a>
            </div>
            <input name="verifycode" type="text" placeholder="请输入验证码">
            <button type="submit" id="vc-button">确定</button>
        </form>
    </div>
    <ul class="bg-bubbles">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>
<script type="text/javascript" src="$!basePath/framework/plugins/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="$!basePath/framework/plugins/jquery.form.js"></script>
<script type="text/javascript">
    $(function () {
        var info = $(".wrapper h1");
        var title = jQuery.trim(info.text());
        var r = false;
        $("#loginForm").ajaxForm({
            beforeSubmit: function (arr, form, options) {
                var username = form.find("input[name='username']");
                if (jQuery.trim(username.val()).length === 0) {
                    alert("请输入用户名");
                    username.focus();
                    return false;
                }
                var password = form.find("input[name='password']");
                if (jQuery.trim(password.val()).length === 0) {
                    alert("请输入密码");
                    password.focus();
                    return false;
                }
                loadding("正在登录，请稍后...");
            },
            success: function (data, statusText, xhr, $form) {
                r = true;
                if (data.success === true) {
                    info.text("登陆成功，正在转向首页...");
                    window.location.href = "$!redirect_url";
                } else {
                    if (data.message === "vc") {
                        showVerify();
                        return;
                    }
                    if (data.message === "vc_error") {
                        info.text("验证码错误");
                        setTimeout(function () {
                            showVerify();
                        }, 1000);
                        return;
                    }
                    info.text(data.message);
                    setTimeout(function () {
                        showSignIn(title);
                        $form.find("input[name='username']").focus();
                    }, 1000);

                }
            }
        });
        $("#loginForm button:submit").focus();
    });

    function loadding(tip) {
        $(".wrapper h1").text(tip);
        $(".wrapper").addClass("form-success");
        $("#loginForm").hide();
        $("#verifyForm").fadeOut(500);
    }

    function showSignIn(tip) {
        $(".wrapper h1").text(tip);
        $(".wrapper").removeClass("form-success");
        $("#loginForm").fadeIn(500);
    }

    function showVerify() {
        $(".wrapper h1").text("二次验证");
        $(".wrapper").removeClass("form-success");
        $("#verifyForm").fadeIn(500);
        $("#verifyForm input[name='verifycode']").focus();
        loadImage();
    }

    function loadImage() {
        $("#verifyForm img").attr("src", "$!basePath/open/captcha");
        $("#verifyForm input[name='verifycode']").val("");
        $("#loginForm #verifycode").val("");
    }

    function verifySubmit() {
        var vc = $("#verifyForm input[name='verifycode']").val();
        $("#loginForm #verifycode").val(vc);
        $("#loginForm").submit();
        return false;
    }
</script>
</body>
</html>